<!-- 我的 -->
<template>
  <view class="my-contaienr">
    <!-- header -->
    <view class="my-header">
      <view class="my-title">
        <text>我的</text>
      </view>
      <!-- user -->
      <view class="my-user">
        <view class="my-avatar">
          <img
            :src="
              userInfoObj && userInfoObj.avatar
                ? tui.getImgUrl(userInfoObj.avatar)
                : './assets/images/icon_default_header.png'
            "
            alt=""
          />
        </view>
        <view class="my-info">
          <view class="my-name"
            >{{ userInfoObj.nickname }} （{{
              userInfoObj && desensitization(userInfoObj.mobile)
            }}）</view
          >
          <view>{{ userInfoObj.is_rz == 1 ? '已实名' : '待实名' }}</view>
        </view>
      </view>
      <!-- 设置 -->
      <view @click="jump('/pages/setting/index')" class="my-setting">
        <img src="/static/images/my-setting.png" alt="" />
      </view>
      <!-- 资产 -->
      <view class="my-asset">
        <!-- 总资 -->
        <view class="my-ta">
          <view class="my-text">账户总资</view>
          <view class="my-ac">
            <text class="my-ac-icon">¥</text>
            <text>&nbsp;</text>
            <text class="my-ac-amount">{{
              userPrice?.property_money_total || '0.00'
            }}</text>
          </view>
        </view>
        <!-- 分割线 -->
        <view class="my-line"></view>
        <!-- 余额明细 -->
        <view class="my-ad">
          <view class="my-ad-item">
            <view class="my-ad-il">
              <img src="./assets/images/my-ac-img1.png" alt="" />
            </view>
            <view class="my-ad-ir">
              <view class="my-ad-ir-amount"
                >¥&nbsp;{{ userPrice?.balance || '0.00' }}</view
              >
              <view class="my-ad-ir-text">可用金额</view>
            </view>
          </view>
          <view class="my-ad-item">
            <view class="my-ad-il">
              <img src="./assets/images/my-ac-img2.png" alt="" />
            </view>
            <view class="my-ad-ir">
              <view class="my-ad-ir-amount"
                >¥&nbsp;{{ userPrice?.xingu_total || '0.00' }}</view
              >
              <view class="my-ad-ir-text">新股申购</view>
            </view>
          </view>
          <view class="my-ad-item">
            <view class="my-ad-il">
              <img src="./assets/images/my-ac-img3.png" alt="" />
            </view>
            <view class="my-ad-ir">
              <view class="my-ad-ir-amount"
                >¥&nbsp;{{
                  (userPrice?.balance - userPrice?.freeze_profit).toFixed(2) > 0
                    ? (userPrice.balance - userPrice.freeze_profit).toFixed(2)
                    : '0.00'
                }}</view
              >
              <view class="my-ad-ir-text">可取金额</view>
            </view>
          </view>
          <view class="my-ad-item">
            <view class="my-ad-il">
              <img src="./assets/images/my-ac-img4.png" alt="" />
            </view>
            <view class="my-ad-ir">
              <view class="my-ad-ir-amount"
                >¥&nbsp;{{ userPrice?.totalyk || '0.00' }}</view
              >
              <view class="my-ad-ir-text">总盈利</view>
            </view>
          </view>
          <view class="my-ad-item">
            <view class="my-ad-il">
              <img src="./assets/images/my-ac-img5.png" alt="" />
            </view>
            <view class="my-ad-ir">
              <view class="my-ad-ir-amount"
                >¥&nbsp;{{ userPrice?.fdyk || '0.00' }}</view
              >
              <view class="my-ad-ir-text">浮动盈利</view>
            </view>
          </view>
          <view class="my-ad-item">
            <view class="my-ad-il">
              <img src="./assets/images/my-ac-img6.png" alt="" />
            </view>
            <view class="my-ad-ir">
              <view class="my-ad-ir-amount"
                >¥&nbsp;{{
                  hide
                    ? '****'
                    : Number(userPrice?.city_value).toFixed(2) || '0.00'
                }}</view
              >
              <view class="my-ad-ir-text">持仓市值</view>
            </view>
          </view>
        </view>
        <!-- 银证按钮 -->
        <view class="my-sc">
          <button @click="silverCertificateTransferFn(0)">银证转入</button>
          <button @click="silverCertificateTransferFn(1)">银证转出</button>
        </view>
      </view>
    </view>
    <!-- 菜单 -->
    <view class="my-menu">
      <view @click="jump('/pages/holding/index')" class="my-menu-item">
        <img src="./assets/images/my-menu-img1.png" alt="" />
        <text>我的持仓</text>
      </view>
      <view
        v-if="sysConfigObj.is_xgsg == 1"
        @click="jump('/pages/shengou/index')"
        class="my-menu-item"
      >
        <img src="./assets/images/my-menu-img2.png" alt="" />
        <text>打新记录</text>
      </view>
      <view
        v-if="sysConfigObj.is_xxps == 1"
        @click="jump('/pages/placementRecord/index')"
        class="my-menu-item"
      >
        <img src="./assets/images/my-menu-img3.png" alt="" />
        <text>配售记录</text>
      </view>
      <view @click="jump('/pages/dzjy/dzjy-record')" class="my-menu-item">
        <img src="./assets/images/my-menu-img4.png" alt="" />
        <text>大宗交易</text>
      </view>
    </view>
    <!-- link -->
    <view class="my-line">
      <view @click="jump('/pages/cms/web')" class="my-link-item">
        <view class="my-link-item-left">
          <view class="ll">
            <img src="./assets/images/my-link-img1.png" alt="" />
          </view>
          <text>在线客服</text>
        </view>
        <view class="my-link-item-right">
          <uni-icons type="right" size="16" color="#A8A8A8" />
        </view>
      </view>
      <view @click="jump('/pages/holdingHistory/index')" class="my-link-item">
        <view class="my-link-item-left">
          <view class="ll">
            <img src="./assets/images/my-link-img2.png" alt="" />
          </view>
          <text>历史持仓</text>
        </view>
        <view class="my-link-item-right">
          <uni-icons type="right" size="16" color="#A8A8A8" />
        </view>
      </view>
      <view @click="jump('/pages/ucenter/entrust')" class="my-link-item">
        <view class="my-link-item-left">
          <view class="ll">
            <img src="./assets/images/my-link-img8.png" alt="" />
          </view>
          <text>委托记录</text>
        </view>
        <view class="my-link-item-right">
          <uni-icons type="right" size="16" color="#A8A8A8" />
        </view>
      </view>
      <view
        @click="jump('/pages/realNameAuthentication/index')"
        class="my-link-item"
      >
        <view class="my-link-item-left">
          <view class="ll">
            <img src="./assets/images/my-link-img3.png" alt="" />
          </view>
          <text>实名认证</text>
        </view>
        <view class="my-link-item-right">
          <uni-icons type="right" size="16" color="#A8A8A8" />
        </view>
      </view>
      <view @click="jump('/pages/bankList/index')" class="my-link-item">
        <view class="my-link-item-left">
          <view class="ll">
            <img src="./assets/images/my-link-img4.png" alt="" />
          </view>
          <text>银行卡</text>
        </view>
        <view class="my-link-item-right">
          <uni-icons type="right" size="16" color="#A8A8A8" />
        </view>
      </view>
      <view @click="jump('/pages/yzlog/index')" class="my-link-item">
        <view class="my-link-item-left">
          <view class="ll">
            <img src="./assets/images/my-link-img5.png" alt="" />
          </view>
          <text>银证记录</text>
        </view>
        <view class="my-link-item-right">
          <uni-icons type="right" size="16" color="#A8A8A8" />
        </view>
      </view>
      <view @click="jump('/pages/pay/index')" class="my-link-item">
        <view class="my-link-item-left">
          <view class="ll">
            <img src="./assets/images/my-link-img6.png" alt="" />
          </view>
          <text>支付密码</text>
        </view>
        <view class="my-link-item-right">
          <uni-icons type="right" size="16" color="#A8A8A8" />
        </view>
      </view>
      <view @click="jump('/pages/contracts/index')" class="my-link-item">
        <view class="my-link-item-left">
          <view class="ll">
            <img src="./assets/images/my-link-img7.png" alt="" />
          </view>
          <text>线上合同</text>
        </view>
        <view class="my-link-item-right">
          <uni-icons type="right" size="16" color="#A8A8A8" />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { ref, computed, inject } from 'vue';
  import { onShow } from '@dcloudio/uni-app';

  const tui = inject('tui');

  // store
  import { useUserStore } from '@/store/user.js';
  // user
  const userStore = useUserStore();

  // api
  import { getUserPriceAll } from '@/api/user.js';

  // userInfo
  const userInfoObj = ref(null);
  // sysConfig
  const sysConfigObj = ref({});

  onShow(() => {
    getMoneyFn();
    userStore.syncUserInfo();

    if (uni.getStorageSync('userInfo')) {
      userInfoObj.value = uni.getStorageSync('userInfo');
    }

    if (uni.getStorageSync('sysConfig')) {
      sysConfigObj.value = uni.getStorageSync('sysConfig');
    }
  });

  // 计算属性 -> 隐藏手机号4-7位
  const desensitization = computed(() => {
    return (value) => {
      const reg = /(\d{3})\d{4}(\d{4})/;
      if (value) {
        return value.replace(reg, '$1****$2');
      }
    };
  });

  // 存储资产数据
  const userPrice = ref(null);
  // 是否隐藏持仓市值
  const hide = ref(false);
  // 获取资产
  const getMoneyFn = () => {
    getUserPriceAll().then((res) => {
      userPrice.value = res.data.list;
    });
  };

  // 点击 银证转入/银证转出 按钮跳转银证转账页面
  const silverCertificateTransferFn = (index) => {
    uni.navigateTo({
      url: `/pages/silverCertificateTransfer/index?tabIndex=${index}`,
    });
  };

  // 链接跳转方法
  const jump = (url) => {
    if (url) {
      uni.navigateTo({
        url,
        animationType: 'pop-in',
      });
    }
  };
</script>

<style lang="scss" scoped>
  .my-contaienr {
    overflow: auto;
    height: 100%;
    padding-bottom: 22rpx;

    .my-header {
      display: flex;
      flex-direction: column;
      position: relative;
      height: 746rpx;
      padding: 50rpx 38rpx 104rpx;
      background-image: url('/static/images/my-header-img.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      box-sizing: border-box;

      .my-title {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 10rpx;
        color: #ffffff;
        font-size: 36rpx;
        font-weight: 500;
        font-family: PingFangSC, PingFang SC;
      }

      .my-user {
        display: flex;
        margin-bottom: 20rpx;

        .my-avatar {
          width: 98rpx;
          height: 98rpx;
          margin-right: 20rpx;
          border-radius: 50%;

          > img {
            width: 100%;
            height: 100%;
          }
        }

        .my-info {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding-top: 8rpx;
          color: #ffd9d9;
          font-size: 24rpx;
          font-weight: 500;
          font-family: PingFangSC, PingFang SC;
          box-sizing: border-box;

          .my-name {
            color: #ffffff;
            font-size: 32rpx;
          }
        }
      }

      .my-setting {
        position: absolute;
        top: 114rpx;
        right: 48rpx;
      }

      .my-asset {
        padding: 0 16rpx;

        .my-ta {
          display: flex;
          align-items: flex-end;

          .my-text {
            color: #ffffff;
            font-size: 28rpx;
            font-weight: 400;
            line-height: 44rpx;
          }

          .my-ac {
            margin-left: 40rpx;
            color: #fff7b4;
            font-weight: 400;

            .my-ac-icon {
              color: inherit;
              font-size: 28rpx;
            }

            .my-ac-amount {
              color: inherit;
              font-size: 48rpx;
            }
          }
        }

        .my-line {
          width: 100%;
          height: 2rpx;
          margin: 16rpx 0 30rpx 0;
          background-color: #fff;
        }

        .my-ad {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          grid-template-rows: repeat(2, 74rpx);
          gap: 20rpx 30rpx;

          .my-ad-item {
            display: flex;
            align-items: center;

            .my-ad-il {
              display: flex;
              align-items: center;
              margin-right: 10rpx;
            }

            .my-ad-ir {
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              color: #ffffff;

              .my-ad-ir-amount {
                font-size: 32rpx;
              }

              .my-ad-ir-text {
                font-size: 22rpx;
              }
            }
          }
        }

        .my-sc {
          display: flex;
          justify-content: space-between;
          margin-top: 24rpx;

          > button {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 290rpx;
            height: 58rpx;
            margin: 0;
            border-radius: 18rpx;
            font-size: 28rpx;
            font-weight: 400;

            &:first-child {
              background: #ffd994;
              color: #8c1c1c;
            }

            &:last-child {
              background: #ffcccc;
              color: #781212;
            }
          }
        }
      }
    }

    .my-menu {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 40rpx;
      position: relative;
      left: 50%;
      width: 714rpx;
      height: 208rpx;
      margin-top: -108rpx;
      padding: 28rpx 24rpx;
      border-radius: 22rpx;
      box-shadow: 0 11px 26rpx 0 rgba(227, 230, 238, 0.5);
      background: #ffffff;
      transform: translateX(-50%);
      box-sizing: border-box;

      .my-menu-item {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;

        > img {
          width: 92rpx;
          height: 96rpx;
        }

        > text {
          color: #000000;
          font-size: 28rpx;
          font-weight: bold;
          font-family: PingFangSC, PingFang SC;
        }
      }
    }

    .my-line {
      margin-top: 44rpx;
      padding: 0 54rpx;
      box-sizing: border-box;

      .my-link-item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 26rpx;
        padding-bottom: 28rpx;
        border-bottom: 1px solid #e2e2e2;

        &:last-child {
          margin-bottom: 0;
          padding-bottom: 0;
          border-bottom: none;
        }

        .my-link-item-left {
          display: flex;

          .ll {
            display: flex;
            width: 70rpx;

            > img {
              margin-right: 24rpx;
            }
          }

          > text {
            color: #575757;
            font-size: 28rpx;
            font-weight: 400;
            font-family: PingFangSC, PingFang SC;
          }
        }

        .my-link-item-right {
          display: flex;
          align-items: center;
        }
      }
    }
  }
</style>
